<template>
  <el-container class="classlist">
    <el-main v-if="!classList.length && !noData">
      <el-loading :loading="true"></el-loading>
    </el-main>

    <el-main class="content">
      <vue-masonry-wall
        :items="classList"
        :column-width="380"
              :max-columns="3"
              :gap="20"
      >
        <template #default="{ item }" v-if="classType === 1">
          <router-link
            :to="'/preview/wallpaper/' + item.id"
            class="item"
            :key="item.id"
          >
            <el-image
              class="image"
              v-if="classType === 1"
              :src="item.smallPicurl"
              fit="cover"
            ></el-image>
            <div v-if="classType === 1" class="item-details">
             <p class="title">{{ item.description }}</p>
            </div>
            <el-image class="image" v-else :src="item.imgUrl" fit="cover"></el-image>
            <div v-if="classType === 2" class="item-details">
              <p class="title">{{ item.description }}</p>
            </div>
          </router-link>
        </template>
        <template #default="{ item }" v-else-if="classType === 2">
          <router-link
            :to="'/preview/album/' + item.id"
            class="item"
            :key="item.id"
          >
            <el-image
              class="image"
              v-if="classType === 1"
              :src="item.smallPicurl"
              fit="cover"
            ></el-image>
            <div v-if="classType === 1" class="item-details">
              <p class="title">{{ item.description }}</p>
            </div>
            <el-image class="image" v-else :src="item.imgUrl" fit="cover"></el-image>
            <div v-if="classType === 2" class="item-details">
              <p class="title">{{ item.description }}</p>
            </div>
          </router-link>
        </template>
      </vue-masonry-wall>
    </el-main>

    <el-footer v-if="classList.length || noData">
      <el-loading :loading="!noData" text="加载中..."></el-loading>
      <span v-if="noData">没有更多数据</span>
    </el-footer>

    <div class="safe-area-inset-bottom"></div>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { listWall } from '@/api/wallpaper/wall.js'
import { listAlbum } from '@/api/wallpaper/album.js'
import VueMasonryWall from '@yeger/vue-masonry-wall'

const classList = ref([])
const noData = ref(false)
const queryParams = { pageNum: 1, pageSize: 12 }
const classType = ref(0)

const route = useRoute()

onMounted(() => {
  const { id = null, type = null} = route.query
  if (id) queryParams.classId = id
  if (type) classType.value = Number(type)
  getClassList()
  // console.log(classList.value)
})

const getClassList = async () => {
  let res
  if (classType.value === 1) res = await listWall(queryParams)
  if (classType.value === 2) res = await listAlbum(queryParams)
  // console.log(res)
  classList.value   = [...classList.value, ...res.rows]
  if (queryParams.pageSize > res.rows.length) noData.value = true
}

onBeforeUnmount(() => {
  localStorage.removeItem('storgClassList')
})
</script>

<style lang="scss" scoped>
.classlist {
  .content {
    :deep(.masonry-wall) {
      margin: 0 auto;
    }

    .item {
      position: relative;
      height: 440px;
      overflow: hidden;

      .el-image {
        width: 100%;
        height: 100%;
        display: block;
        transition: filter 0.3s;
      }

      .item-details {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px;
        transition: opacity 0.3s;
      }
    }
  }
}
</style>
